<template>
	<view class="bg-light flex flex-column" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 收货地址 -->
		<view class="bg-white mx-3 mb-2 mt-3 font-weight-bolder rounded-lg ">
			<view
				@click="clickWarehouse"
				class="bg-white mx-3 mb-2 p-3 rounded-lg"
				v-if="warehouse_address"
			>
				<view class="flex align-center">
				<image
					:src="Domain_ICON + '/position.png'"
					class="rounded-circle bg-info"
					style="width: 30rpx; height: 30rpx"
					mode=""
				></image>
				<text class="font ml-1">{{ warehouse_address.Warehouse_Name }}</text>
				<text class="font ml-1">{{ warehouse_address.Operation_ID }}</text>
				</view>
				<view class="pl-4">
				<text class="font-sm">仓库地址：{{ warehouse_address.Warehouse_Address }}</text>
				</view>
			</view>
			<view class="font text-center p-3"  v-else>点击选择仓库</view>
		</view>
		<!-- 商品种类 -->
		<view v-for="(item, index) in goods" :key="index">
			<view class="bg-white mx-3 mb-4 px-2 py-3 rounded-lg">
				<view class="flex" style="position: relative">
					<image class="rounded-lg flex-shrink" style="width: 150rpx; height: 150rpx"
						:src="Domain_IMG + item.Picture_URL" mode=""></image>
					<view class="ml-2 pr-10 text-ellipsis" style="width: 100%; position: relative">
						<text class="font">{{ item.Article_Name }}</text><br />
						<text class="font-sm text-muted">规格:{{ item.Specifications_Name }}</text>
						<text class="font-sm"
							style="position: absolute; bottom: 0; left: 0">￥{{ item.Paystages[item.isActive].Unit_Price }}</text>
					</view>
					<text class="font-sm"
						style="position: absolute; right: 0; height: 100%; line-height: 150rpx;">×{{ item.quantity }}</text>
				</view>
				<!-- 付款类表 -->
				<view class="rounded-lg my-2 bg-light mt-2 py-1 px-2" style="position: relative;">
					<text class="font text-muted">付款类型:</text>
					<view class="flex align-center" style="float: right">
						<!-- <radio-group  value="0" v-if="item.Paystages[item.isActive].Full_Payment">
							<radio value="0"  @change="(e) => radioChange(item,e) " :checked="item.Transaction_Type == '0'" class="small-radio"/>
							<text class="font-sm">{{ item.Transaction_Type }}</text>
						</radio-group>
						<radio-group  value="1" v-if="item.Paystages[item.isActive].Payment_Days">
							<radio value="1" @change="(e) => radioChange(item,e) " :checked="item.Transaction_Type == '1'" class="small-radio" />
							<text class="font-sm">{{ item.Transaction_Type }}</text>
						</radio-group> -->
						<view @click="radioChange(item,0)" class="flex-shrink text-white bg-info text-center rounded-lg mr-2 flex align-center"
							v-if="item.Paystages[item.isActive].Full_Payment"
							hover-class="bg-hover-info" :hover-stay-time="150" style="padding:10rpx;"
							>
							<text class="font-small">全款</text>
						</view>
						<view @click="radioChange(item,1) " class="flex-shrink text-white bg-info text-center rounded-lg flex align-center"
							hover-class="bg-hover-info" :hover-stay-time="150" style="padding:10rpx;"
							v-if="item.Paystages[item.isActive].Payment_Days">
							<text class="font-small">账期</text>
						</view>
					</view>
				</view>
				<!-- 付款周期 -->
				<view class=" m-auto rounded-lg py-1 bg-light">
					<view class="font rounded zq mt-2 ml-2">
					<view class="font px-2 py-1 mr-2" v-for="(item2, key2 ,index2) in item.Paystages" :key="key2"
							@click="toggleStyle(item,key2)" :class="item.isActive == key2?'bg-info text-white':'bg-light'" style="border-radius: 10rpx">查看方案{{ ChinesNum(index2 + 1) }}</view>
					</view>
					<!-- 展示细则 -->
					<view class="mt-2 m-auto  table font bg-light">
						<text class="h3 font-weight-bold font"  v-if="item.Paystages[item.isActive].Full_Payment">全款细则</text>
						<view :class="{ active: item.Transaction_Type == 0 }"  v-if="item.Paystages[item.isActive].Full_Payment">
							<view class="th  border-bottom border-muted">
								<view class="font font-weight-bold">付款类型</view>
								<view class="font font-weight-bold">折扣</view>
								<view class="font font-weight-bold">优惠总价</view>
							</view>
							<view class="td">
								<view class="font">{{ item.Paystages[item.isActive].Full_Payment.Trading_Explain }}</view>
								<view class="font">{{ item.Paystages[item.isActive].Full_Payment.Trading_Percentage }}%</view>
								<view class="font">
									{{(item.Paystages[item.isActive].Unit_Price * item.quantity * item.Paystages[item.isActive].Full_Payment.Trading_Percentage) /100}}
								</view>
							</view>
						</view>
						<view class="mt-2"></view>
						<text class="h3 font-weight-bold font" v-if="item.Paystages[item.isActive].Payment_Days">步骤付款细则</text>
						<view :class="{ active: item.Transaction_Type == 1  }" v-if="item.Paystages[item.isActive].Payment_Days">
							<view class="th  border-bottom border-muted">
								<view class="font font-weight-bold">付款阶段</view>
								<view class="font font-weight-bold">额度</view>
								<view class="font font-weight-bold">金额计算</view>
							</view>
							<view v-for="(item2, index2) in item.Paystages[item.isActive].Payment_Days" :key="index2">
								<view class="td">
									<view class="font">{{ item2.Trading_Explain }}</view>
									<view class="font">{{ item2.Trading_Percentage }}%</view>
									<view class="font">{{(item2.Unit_Price * item.quantity  * item2.Trading_Percentage) / 100}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品金额 -->
		<view class="mx-4 rounded-lg p-3 bg-white">
			<text class="font text-muted">商品金额：</text>
			<text class="font"
				style="display: inline-block; float: right">￥{{Amount}}</text>
		</view>
		<!-- 底层总计 -->
		<view id="fixed" class="fixed-bottom py-1 bg-white">
			<view class="m-auto flex align-center justify-between" style="width: 90%">
				<view class="" style="width: 100%">
					<text class="font">共{{ quantity }}件 合计</text><text
						class="font-md font-weight-bold">￥{{ Amount }}</text>
				</view>
				<view @click="submit()" class="flex-shrink text-white bg-info py-3 text-center rounded-lg"
					hover-class="bg-hover-info" :hover-stay-time="150" style="width: 35%">
					<text class="font">提交订单</text>
				</view>
			</view>
		</view>
		<Merchantnew :show="isShow" :procure_order="form" :amount="Unit_Price" @Close="handleClose()"></Merchantnew>
		<!-- 用户协议 -->
		<view class="mask" v-if="mask">
			<view class="model_box">
				<view class="mb-tit">用户协议和隐私政策</view>
				<view class="mb-content">
					<view class="mb-con">尊敬的用户您好！</view>
					<view class="mb-con">请您务必认真阅读、充分理解“用户服务协议”和“隐私政策”各条款，包括但不限于为了向您提供数据、分享、统计等服务所要获取的权限信息。</view>
					<view class="mb-con1">
						<navigator class="mb-a" url="/pages/my/privacyPolicy">《用户服务协议》</navigator>
						和
						<navigator class="mb-a" url="/pages/my/privacyPolicy">《隐私政策》</navigator>
					</view>
					<text>请您仔细阅读上方的的用户协议与隐私政策，请点击同意接受我们的服务</text>
				</view>
				<view class="checkbox">
					<view class="qr">
						<navigator class="noUse" target="miniProgram" open-type="exit">暂不使用</navigator>
						<view class="agree" @click="agree">同意</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import Merchantnew from "@/components/payment/Merchantnew.vue";
	import { getMerchantList,getWaresList,getSupplierInfoID} from "@/api/merchant.js";
	import { accMul ,toChinesNum} from "@/static/js/GeneralUtil";
	import { NowTime } from "@/static/js/DateUtil";
	import {accAdd} from "@/static/js/GeneralUtil.js";
	export default {
		components: {
			Merchantnew,
		},
		data() {
			return {
				message: "",
				isActive_index:0,
				isActive1: "Min_0",
				Domain_IMG: app.globalData.Domain_IMG, //全局变量--域名
				isShow: false, //调起支付方式
				fixedHeight: 0, //底部悬浮栏高度
				mask: false, //协议
				distance: 0,
				Article_Name: [],
				tabs: [],
				form: {
					Purchase_Order_SerialNumber: "",
					Supplier_SerialNumber: "", //供应商编号
					Purchase_Date: NowTime(), //采购日期
					Purchase_Amount: 0, //采购订单金额
					Paid_Amount: 0,
					Return_Amount: 0,
					Apply_Amount: 0,
					Confirm_Amount: 0,
					Enterprise_Info_SerialNumber: app.globalData.memberInfo.Enterprise_Info_SerialNumber,
					Transaction_Type: 0, //交易类型
					Children: {
						purchase_order_detail: [{
							//采购订单明细
							Purchase_Order_Detail_SerialNumber: "",
							Purchase_Order_SerialNumber: "",
							Brand_SerialNumber: "", //品牌编号
							Article_SerialNumber: "", //商品编号
							Article_Specifications_SerialNumber: "", //规格主键
							Article_UnitPrice: "", //商品吊牌价
							Purchase_UnitPrice: 0, //成交单价
							Quantity: 0, //数量
							Receipt_Quantity: 0, //入库数量
							Not_Receipt_Quantity: 0, //未到数量
							Shippment_Quantity: 0, //出库数量
							Inventory_Quantity: 0, //存货数量
							Amount: 0, //成交金额
							Unit_Price_SerialNumber: "", //价格单流水号
							Depot_Type: 0,
							Store_SerialNumber: "", //仓库
						}, ],
						purchase_order_paystages: [{
							Purchase_Order_Paystages_SerialNumber: "",
							Purchase_Order_SerialNumber: "",
							Trading_Explain: "", //账期说明
							Trading_Detail_SerialNumber: "", //账期类型
							Trading_Percentage: "", //利率
							Trading_Days: "", //天数
							Purchase_Amount: "", //付款金额
							Paid_Amount: 0, //已付金额
							Collection_Date: "", //付款时间
						}, ],
					},
				},
				Wares: [], //仓库列表
				goods: [
					// {
					// 	Article_Name: "七度空间女士护垫155mm",
					// 	Article_SerialNumber: "A00000000000044",
					// 	Article_Specifications_SerialNumber: "A04000000000072",
					// 	Article_UnitPrice: "8",
					// 	Brand_SerialNumber: "B00000000000044",
					// 	Category_Name: "个人洗护",
					// 	Independence: "1",
					// 	Picture_URL: "/C_6903244370905_5.jpg",
					// 	Remain_Quantity: "2",
					// 	Specifications_Name: "155mm",
					// 	Starting_Quantity: "2",
					// 	Unit_Price: "10",
					// 	Unit_Quantity: "2",
					// 	Wholesale_Unit_Price_SerialNumber: "W00000000000014",
					// 	isShow: true,
					// 	Paystages:
					// 		{
					// 			Min_0:{
					// 				Full_Payment:{
					// 					Min_Quantity: "0",
					// 					Operation_Datetime: "2024-02-20 11:40:16.206",
					// 					Operation_ID: "13844550001",
					// 					Row_Status: "0",
					// 					Trading_Days: "0",
					// 					Trading_Detail_SerialNumber: "T01000000000001",
					// 					Trading_Explain: "全款",
					// 					Trading_Percentage: "95",
					// 					Transaction_Type: "0",
					// 					Unit_Price: "10",
					// 					User_Type: "0",
					// 					Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000079",
					// 					Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 				},
					// 				// Payment_Days:[
					// 				// 	{
					// 				// 		Min_Quantity: "0",
					// 				// 		Operation_Datetime: "2024-02-20 11:40:16.206",
					// 				// 		Operation_ID: "13844550001",
					// 				// 		Row_Status: "0",
					// 				// 		Trading_Days: "1",
					// 				// 		Trading_Detail_SerialNumber: "T01000000000001",
					// 				// 		Trading_Explain: "确认交易",
					// 				// 		Trading_Percentage: "10",
					// 				// 		Transaction_Type: "1",
					// 				// 		Unit_Price: "10",
					// 				// 		User_Type: "0",
					// 				// 		Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000080",
					// 				// 		Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 				// 	},
					// 				// 	{
					// 				// 		Min_Quantity: "0",
					// 				// 		Operation_Datetime: "2024-02-20 11:40:16.206",
					// 				// 		Operation_ID: "13844550001",
					// 				// 		Row_Status: "0",
					// 				// 		Trading_Days: "1",
					// 				// 		Trading_Detail_SerialNumber: "T01000000000004",
					// 				// 		Trading_Explain: "发货后",
					// 				// 		Trading_Percentage: "10",
					// 				// 		Transaction_Type: "1",
					// 				// 		Unit_Price: "10",
					// 				// 		User_Type: "0",
					// 				// 		Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000081",
					// 				// 		Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 				// 	}
					// 				// ],
					// 				Unit_Price: "10"
					// 			},
					// 			Min_1:{
					// 				Full_Payment:{
					// 					Min_Quantity: "0",
					// 					Operation_Datetime: "2024-02-20 11:40:16.206",
					// 					Operation_ID: "13844550001",
					// 					Row_Status: "0",
					// 					Trading_Days: "0",
					// 					Trading_Detail_SerialNumber: "T01000000000001",
					// 					Trading_Explain: "全款",
					// 					Trading_Percentage: "96",
					// 					Transaction_Type: "0",
					// 					Unit_Price: "10",
					// 					User_Type: "0",
					// 					Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000079",
					// 					Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 				},
					// 				Payment_Days:[
					// 					{
					// 						Min_Quantity: "0",
					// 						Operation_Datetime: "2024-02-20 11:40:16.206",
					// 						Operation_ID: "13844550001",
					// 						Row_Status: "0",
					// 						Trading_Days: "1",
					// 						Trading_Detail_SerialNumber: "T01000000000001",
					// 						Trading_Explain: "确认交易",
					// 						Trading_Percentage: "12",
					// 						Transaction_Type: "1",
					// 						Unit_Price: "10",
					// 						User_Type: "0",
					// 						Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000080",
					// 						Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 					},
					// 					{
					// 						Min_Quantity: "0",
					// 						Operation_Datetime: "2024-02-20 11:40:16.206",
					// 						Operation_ID: "13844550001",
					// 						Row_Status: "0",
					// 						Trading_Days: "1",
					// 						Trading_Detail_SerialNumber: "T01000000000004",
					// 						Trading_Explain: "发货后",
					// 						Trading_Percentage: "17",
					// 						Transaction_Type: "1",
					// 						Unit_Price: "10",
					// 						User_Type: "0",
					// 						Wholesale_Unit_Price_Paystages_SerialNumber: "W03000000000081",
					// 						Wholesale_Unit_Price_SerialNumber: "W00000000000014"
					// 					}
					// 				],
					// 				Unit_Price: "10"
					// 			}
					// 	},
					// 	isActive: "Min_0",
					// 	quantity: 10,
					// 	Transaction_Type:'0',
					// }
				], //商品信息
				quantity: 0, //商品数量
				Paystages: {}, //付款方案
				Unit_Price: 0, //总价格
				count: 0,
				warehouse_address:{},
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				Amount: 0,//总价
			};
		},
		onLoad(options) {
			this.fixed();
			let obj = JSON.parse(decodeURIComponent(options.SalesOrder));
			this.goods = obj;
			console.log(obj);
			this.goods.forEach((item) => {
				this.Amount = accAdd(this.Amount, item.Amount);
				this.quantity = accAdd(this.quantity, item.quantity);
			})
			// this.js();
			this.getSupplier();
			//获取地址
			this.warehouse_address = uni.getStorageSync('warehouse_address').Warehouse_Address;
		},
		computed: {
			ChinesNum(){
				return function(num){
					return toChinesNum(num)
				}
			},
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
		},
		methods: {
			//点击仓库
			clickWarehouse() {
				uni.navigateTo({
						url: "/pages/Merchant/WarehouseList"
				});
			},
			toggleStyle(item,key2) {//切换
				item.isActive = key2;
			},
			handleClose() {
				//关闭支付关闭
				this.isShow = false;
			},
			radioChange(item, i) {
				item.Transaction_Type = i;
				this.js(item);
  			},
			//计算价格
			js(item) {
				//采购订单明细添加
				if (item.Transaction_Type == 0) {//全款
					for (const key in item.Paystages) {
					if (item.quantity > item.Paystages[key].Full_Payment.Min_Quantity) {
						item.Amount = item.quantity * ( item.Paystages[key].Unit_Price *item.Paystages[key].Full_Payment.Trading_Percentage) / 100;
					}
					//重置总价
					this.Amount = 0;
					console.log(item.Amount);
					this.goods.forEach((item) => {
						this.Amount = accAdd(this.Amount, item.Amount);
					})
				}
				}else{
					for (const key in item.Paystages) {//分期
						if (item.quantity > item.Paystages[key].Payment_Days[0].Min_Quantity) {
							item.Amount = item.quantity * item.Paystages[key].Unit_Price * item.Paystages[key].Payment_Days[0].Trading_Percentage /100;
						}
					}
					console.log(item.Amount);
					//重置总价
					this.Amount = 0;
					this.goods.forEach((item) => {
						this.Amount = accAdd(this.Amount, item.Amount);
					})
				}
			},
			fixed() {
				//底部模块高度获取
				uni.createSelectorQuery().select("#fixed").boundingClientRect((res) => {
					this.fixedHeight = res.height + this.rpxToPx(20);
				}).exec();
			},
			agree() {
				//协议确认
				this.mask = false;
				uni.setStorageSync("mask", true);
				app.globalData.Rights_Type = "1";
			},
			//供应商单号
			async getSupplier() {
				const res = await getSupplierInfoID({
					Enterprise_Info_SerialNumber: app.globalData.enterprise,
					My_Enterprise_Info_SerialNumber: app.globalData.memberInfo.Enterprise_Info_SerialNumber,
				});
				this.form.Supplier_SerialNumber = res.Data[0].Supplier_SerialNumber;
			},
			submit() {
				console.log(this.goods);
				let purchase_order = [];
				let purchase_order_paystages= [];
				this.goods.forEach((item) => {
					purchase_order.push({
						Purchase_Order_SerialNumber: "",
						Supplier_SerialNumber:this.form.Supplier_SerialNumber,
						Purchase_Date: NowTime(),
						Purchase_Amount:this.form.Purchase_Amount,
						Transaction_Type: item.Transaction_Type,
						Quantity: item.quantity,
					});
					if (item.Transaction_Type == 1) {
						for (const key in item.Paystages) {
							item.Paystages[key].Payment_Days.forEach((item2) => {
								purchase_order_paystages.push({
									Purchase_Order_Paystages_SerialNumber:"",
									Purchase_Order_SerialNumber:item.Purchase_Order_SerialNumber,
									Trading_Explain:item2.Trading_Explain,
									Trading_Detail_SerialNumber: item2.Trading_Detail_SerialNumber,
									Trading_Percentage: item2.Trading_Percentage,
									Trading_Days: item2.Trading_Days,
									Purchase_Amount: this.accMul(item.quantity, item.Paystages[key].Unit_Price) * (item2.Trading_Percentage / 100),
									Paid_Amount: item.Amount,
									Collection_Date: "",
								})
							})
						}
					}else{
						for (const key in item.Paystages) {
							purchase_order_paystages.push({
								Purchase_Order_Paystages_SerialNumber:"",
								Purchase_Order_SerialNumber:item.Purchase_Order_SerialNumber,
								Trading_Explain:item.Paystages[key].Full_Payment.Trading_Explain,
								Trading_Detail_SerialNumber: item.Paystages[key].Full_Payment.Trading_Detail_SerialNumber,
								Trading_Percentage: item.Paystages[key].Full_Payment.Trading_Percentage,
								Trading_Days: item.Paystages[key].Full_Payment.Trading_Days,
								Purchase_Amount: 0,
								Paid_Amount: item.Amount,
								Collection_Date: "",
							})
						}

					}

				});
				console.log(purchase_order);
				console.log(purchase_order_paystages);
				// this.isShow = true;
			},
			//供应商单号
			rpxToPx(rpx) {
				//rpx转px
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				return (screenWidth * Number.parseInt(rpx)) / 750;
			},
			accMul(arg1, arg2) {
				let m = 0,s1 = arg1.toString(),s2 = arg2.toString();
				try {m += s1.split(".")[1].length;} catch (e) {}
				try {m += s2.split(".")[1].length;} catch (e) {}
				return ((Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m));
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.model_box {
			width: 80%;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			// z-index: 1000;
			background: #fff;
			// height:48%;
			border-radius: 15rpx;
		}

		.mb-content {
			padding: 10rpx 20rpx 10rpx 25rpx;
			box-sizing: border-box;
			height: 80%;
			overflow: scroll;
		}

		.mb-tit {
			padding: 15rpx 0rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			text-align: center;
		}

		.mb-con {
			font-size: 30rpx;
			text-indent: 2rem;
			line-height: 1.5;
		}

		.mb-con1 {
			font-size: 30rpx;
			text-indent: 2rem;
			display: flex;

			.mb-a {
				// width: 180rpx;
				height: 40rpx;
				display: inline-block;
				padding: 0;
				margin: 0;
				color: #006df7;
				text-decoration: underline;
				text-indent: 0rem;
			}
		}

		.checkbox {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 11%;
		}

		.checkbox .qx {
			width: 50%;
			text-align: center;
			border-right: 1rpx solid #efefef;
		}

		.qr {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			font-size: 30rpx;
			padding: 0;
			padding-right: 30rpx;

			.noUse {
				width: 50%;
				text-align: center;
				border-right: 1rpx solid #f3f3f3;
				color: #bbbbbb;
				padding-bottom: 15rpx;
			}

			.agree {
				width: 50%;
				text-align: center;
				font-size: 30rpx;
				color: #006df7;
				padding-bottom: 15rpx;
			}
		}
	}

	.small-radio {
		transform: scale(0.6);
	}

	.detai {
		background-color: #fff;
	}

	.active {
		background-color: #ece476;
		color: #000;
	}

	.table {
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #f8f9fa;
		padding: 20rpx;

		view {
			text-align: center;
			width: 100%;
		}

		.th {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			line-height: 60rpx;
		}

		.td {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.zq {
		display: flex;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
</style>